<template>
    <el-scrollbar height="525px">
        <template v-for="payment in paymentRecords">
            <el-card style="max-width: 480px; margin: 20px 0;">
                <template #header>
                    <div class="card-header">
                        <span>{{ payment.subject }}</span>
                    </div>
                </template>
                <p>金额：{{ Math.floor(payment.price / 100) }}.{{ payment.price % 100 }}元</p>
                <p>token额度：{{ payment.token }}</p>
                <p>商户订单号：{{ payment.payNo }}</p> 
                <el-button type="danger" @click="deletePaymentConfirm(payment.id)">删除订单</el-button>
            </el-card>
        </template>
    </el-scrollbar>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { getPaymentRecords, deletePayment, pay } from "@/api/pay"
import { ElMessageBox, ElNotification } from 'element-plus'

onMounted(async () => {
    const result = await getPaymentRecords();
    if (result.data.length !== 0) {
        paymentRecords.splice(0, paymentRecords.length, ...result.data);
    } else {
        paymentRecords.splice(0, paymentRecords.length);
    }
})

const paymentRecords = reactive([{}]);

const deletePaymentConfirm = async (id)=>{
    console.log('delete');
    try {
        await ElMessageBox.confirm("确定要删除这个订单吗？", "删除订单", {
            confirmButtonText: "删除",
            cancelButtonText: "取消",
            type: "warning",
        })

        console.log("delete" + id);

        await deletePayment(id);
        console.log("delete finish");


        window.location.assign(window.location.href);
        ElNotification({
              title: '删除订单',
              message: '删除成功',
              type: 'info',
        })

        console.log("删除成功");


    } catch (error) {
        if (error == 'cancel') {
            console.log("取消删除");
        }
    }
}

</script>

<style></style>